<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=624" />

    <title>MathQuill Digit Grouping Demo</title>

    <link rel="stylesheet" type="text/css" href="support/home.css" />
    <link rel="stylesheet" type="text/css" href="../build/mathquill.css" />
  </head>
  <body>
    <div id="body">
      <a href="http://github.com/laughinghan/mathquill"
        ><img
          style="position: absolute; top: 0; right: 0; border: 0"
          src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
          alt="Fork me on GitHub!"
      /></a>

      <h1>
        <a href="http://mathquill.github.com">MathQuill</a> Digit Grouping Demo
      </h1>

      <h3>Grouping Disabled</h3>
      <p>
        <span id="grouping-disabled">-12345678 + .23232323 + 23232.23233</span>
      </p>

      <h3>Grouping Enabled</h3>
      <p>
        <span id="grouping-enabled">-12345678 + .23232323 + 23232.23233</span>
      </p>

      <h3>Optimized latex updates</h3>
      <p><span id="optimized">-12345678.2342342</span></p>

      <h3>Edge Cases</h3>
      <p><span id="edge-cases"></span></p>
    </div>

    <script type="text/javascript" src="support/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="../build/mathquill-basic.js"></script>
    <script type="text/javascript">
      MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);

      var mqDisabled = MQ.MathField($('#grouping-disabled')[0], {
        autoSubscriptNumerals: true,
        autoCommands:
          'alpha beta sqrt theta phi pi tau nthroot sum prod int ans percent mid square',
        autoParenthesizedFunctions: 'sin cos',
        enableDigitGrouping: false,
      });

      var mqEnabled = MQ.MathField($('#grouping-enabled')[0], {
        autoSubscriptNumerals: true,
        autoCommands:
          'alpha beta sqrt theta phi pi tau nthroot sum prod int ans percent mid square',
        autoParenthesizedFunctions: 'sin cos',
        enableDigitGrouping: true,
      });

      var mqOptimized = MQ.MathField($('#optimized')[0], {
        autoSubscriptNumerals: true,
        autoCommands:
          'alpha beta sqrt theta phi pi tau nthroot sum prod int ans percent mid square',
        autoParenthesizedFunctions: 'sin cos',
        enableDigitGrouping: true,
      });

      var mqEdgeCases = MQ.MathField($('#edge-cases')[0], {
        autoSubscriptNumerals: true,
        autoCommands:
          'alpha beta sqrt theta phi pi tau nthroot sum prod int ans percent mid square',
        autoParenthesizedFunctions: 'sin cos',
        enableDigitGrouping: true,
      });

      var optimizedLatexs = [
        '',
        '1',
        '12',
        '123',
        '123',
        '1234',
        '1235',
        '123456.',
        '12356.3',
        '12356.3234',
        '12356.3234.23',
        '12356.323423',
      ];
      setInterval(function () {
        // cycle through the latex values
        var latex = optimizedLatexs.shift();
        optimizedLatexs.push(latex);
        mqOptimized.latex(latex);
      }, 2000);

      var edgeCaseLatexs = [
        '',
        '1\\ ',
        '\\ 1',
        '\\ 1\\ ',
        'a',
        'a\\ ',
        '\\ a',
        'a\\ a',
        '\\ a\\ ',
        '.',
        '.\\ .',
        '..',
        '2..',
        '..2',
        '\\ \\ ',
        '\\ \\ \\ ',
      ];
      setInterval(function () {
        // cycle through the latex values
        var latex = edgeCaseLatexs.shift();
        edgeCaseLatexs.push(latex);
        mqEdgeCases.latex(latex);
      }, 100);
    </script>
  </body>
</html>
